<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <!-- 查询 -->
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="分组名称：">
                <el-input
                  v-model="searchForm.name"
                  maxlength="10"
                  show-word-limit
                  class="input-with-select"
                  placeholder="请输入分组名称"
                />
              </el-form-item>
              <el-form-item class="search-form-item" label="创建时间">
                <el-date-picker
                  v-model="create_time"
                  type="datetimerange"
                  @change="create_timeWay"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resettingWay"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <el-button
              v-hasPermi="'Grouping/add'"
              type="primary"
              size="small"
              @click="addGrouping"
              icon="el-icon-circle-plus-outline"
              >添加分组</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            :data="groupList"
            style="width: 100%"
          >
            <el-table-column prop="id" align="center" width="150" label="ID">
            </el-table-column>
            <el-table-column prop="name" align="center" label="分组名称">
            </el-table-column>
            <el-table-column
              prop="group_count"
              align="center"
              width="150"
              label="分组人数"
            >
            </el-table-column>
            <el-table-column prop="created_at" align="center" label="创建时间">
            </el-table-column>

            <el-table-column
              fixed="right"
              width="180"
              prop="address"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  v-hasPermi="'Grouping/del'"
                  style="margin-right: 10px"
                  type="text"

                  @click="putGrade(scope.row)"
                >
                  编辑
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="delGradeWay(scope.row)"
                >
                  <el-button
                    v-hasPermi="'Grouping/edit'"
                    type="text"

                    slot="reference"
                  >
                    删除
                  </el-button>
                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- <el-dialog
      title="添加分组"
      :visible.sync="dialogGrouping"
      width="500px"
      @close="CloseDialogGrouping"
      custom-class="custorm"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input
            type="text"
            placeholder="请输入分组名称"
            onkeyup="value =value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"
            maxlength="10"
            clearable
            show-word-limit
            v-model="ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogGrouping">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <!--  -->
    <el-drawer
         :modal-append-to-body="false"
         :append-to-body="true"
         title="添加分组"
         size="40%"
         :withHeader="false"
         :visible.sync="dialogGrouping"
         @close="CloseDialogGrouping"
         :show-close="true"
       >
         <div style="position: relative;margin-bottom: 0px;">
           <div class="drawerTitle">
             <span>添加分组</span>
             <div class="close" @click="CloseDialogGrouping">
               <i class="el-icon-close" style="font-size: 24px;"></i>
             </div>
           </div>
         </div>
         <el-alert
           class="warningtips"
           title="用户分组：系统可通过手动管理或条件触发自动将用户划分分组,方便平台进行管理及筹划营销活动!"
           type="warning"
           :closable="false"
         >
         </el-alert>
         <el-scrollbar
           wrap-style="overflow-x:hidden;"
           style="height: calc(100vh - 195px)"
         >
       <el-row>
         <el-form
           :model="ruleForm"
           status-icon
           :rules="rules"
           ref="ruleForm"
           label-width="100px"
           class="demo-ruleForm"
         >
          <el-col :span="18">
           <el-form-item label="分组名称" prop="name">
             <el-input
               type="text"
               placeholder="请输入"
               onkeyup="value =value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"
               maxlength="10"
               clearable
               show-word-limit
               v-model="ruleForm.name"
               autocomplete="off"
             ></el-input>
           </el-form-item>
            </el-col>
            <el-col :span="18">
             <el-form-item label="分组备注" prop="remark">
               <el-input
                 type="textarea"
                 :autosize="{ minRows: 4, maxRows: 6 }"
                 placeholder="请输入"
                 v-model="ruleForm.remark"
               >
               </el-input>
             </el-form-item>
              </el-col>
         </el-form>
       </el-row>
       </el-scrollbar>
       <el-col :span="24" style="text-align: right; padding-right: 30px;">
             <el-button @click="CloseDialogGrouping">取消</el-button>
             <el-button

               type="primary"
               @click="submitForm('ruleForm')"
               >保存</el-button
             >
           </el-col>
       <!-- <span slot="footer" class="dialog-footer">
         <el-button @click="CloseDialogLabel">取 消</el-button>
         <el-button type="primary" @click="submitForm('ruleForm')"
           >确 定</el-button
         >
       </span> -->
    </el-drawer>
  </div>
</template>

<script>
import { getgroupList, addgrouping, delGroup } from "@/api/user/index";
export default {
  name: "Grouping",
  data() {
    return {
      create_time: [],
      loading: false,
      currentPage4: 4,
      dialogGrouping: false,
      groupList: [],
      total: 0,
      ruleForm: {
        name: "",
        remark:""
      },
      searchForm: {
        name: "",
        page: 1,
        count: 10,
        end_time: "",
        start_time: "",
      },
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("分组不能为空"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    create_timeWay(vla) {
      this.searchForm.start_time = vla[0];
      this.searchForm.end_time = vla[1];
    },
    getListWay() {
      this.loading = true;
      getgroupList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200) {
          this.$messages.error(res.msg);
          return;
        }
        this.groupList = res.data.list;
        this.total = res.data.total;
      });
    },
    // 重置
    resettingWay() {
      this.searchForm.name = "";
      this.searchForm.start_time = "";
      this.searchForm.end_time = "";
      this.create_time = [];
      this.getListWay();
    },
    // 打开弹框
    addGrouping() {
      this.dialogGrouping = true;
    },
    // 关闭弹框
    CloseDialogGrouping() {
      this.$refs.ruleForm.resetFields();
      this.dialogGrouping = false;
      this.ruleForm = {
        name: "",
      };
    },
    // 修改
    putGrade(row) {
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.dialogGrouping = true;
    },
    // 提交
    submitForm(formName) {
      var _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addgrouping(_this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$messages.success("添加成功");
              this.dialogGrouping = false;
              this.getListWay();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    delGradeWay(row) {
      delGroup({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss" scoped>
  .warningtips{
    margin-bottom: 30px;
    color: #333;
    background-color: #d4e3fc;
    font-weight: 600;
    font-size: 12px;
    padding: 15px 10px 15px 10px;
  }
</style>
<style>
</style>
